<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wbesocket测试页面</title>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
</head>
<body>
    <div>
        <h2>wbesocket测试页面</h2>

        <input type="text" value="" name="msg" id="send_msg">
        <button id="send">发送</button>
        <br>
        <br>
        <br>
        <div>服务端返回：</div>
        <ul id="msg_list">
        </ul>
    </div>
</body>
</html>

<script>
    //  {"status":"200","msg":"测试","type":"1","data":{"id":"123","touid":"456"},"room_id":"888666"}
    var ws = new WebSocket("ws://localhost:8889/ws/v1/handle?uid=1&username=lxn");
    //连接打开时触发
    ws.onopen = function(evt) {
        console.log("连接打开 ...");

        //  发送信息到服务器
        ws.send("连接成功！！！");
    };
    //接收到消息时触发
    ws.onmessage = function(evt) {
        console.log("服务器消息: " + evt.data);

        addList(evt.data)
    };
    //连接关闭时触发
    ws.onclose = function(evt) {
        console.log("连接关闭.");
    };

    $(function () {
        $("#send").on("click", function () {
            var send_text = $("#send_msg").val();

            if(send_text){
                //  发送信息到服务器
                ws.send(send_text);
            }
        })
    });

    function addList(msg) {
        var html = '<li>'+msg+'</li>';
        $("#msg_list").append(html)
    }

</script>